<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>函数节流demo</title>
    <style>
        html,
        body {
            height: 800%;
            /* 要有足够高度去测试滚动 */
        }
    </style>
</head>

<body>
    <script>
        // @param fn 要被节流的函数
        // @param delay 规定时间
        function throttle(fn, delay) {
            var flag = true;
            //使用闭包是为了避免lastTime每次都初始化
            return function () {
                //获取当前时间戳
                if (!flag) return
                flag = false
                setTimeout(() => {
                    fn.apply(this);
                    flag = true
                }, delay)
            }
        }
        //用屏幕滚动测试函数节流
        document.onscroll = throttle(function () {
            console.log('触发滚动函数');
        }, 5000);
//也就是只要一滚动 就会执行一次,,下一次执行就到5000ms之后
    </script>
</body>